import { defineStore } from "pinia";
import { getToken, removeToken, setToken } from "../utils/token-utils";
import type { UserInfoState } from "./interface";
import { ElMessage } from "element-plus";

import { login, getUserInfo } from "@/api/user";
import router from "@/router/index";
import _ from "lodash";
import type { RouteRecordRaw } from "vue-router";
//1.导入路由表
import { staticRoutes,allAsyncRoutes  } from "@/router/routes";

/**
 * 根据当前用户路由权限信息，过滤得到对应的路由对象数组
 */
function filtrateAllSyncRoutes(
    routes: RouteRecordRaw[],
    userRoutes: string[]
  ): RouteRecordRaw[] {
    // 存储过滤后的路由
    const newRoutes: RouteRecordRaw[] = [];
    // 循环routes
    routes.forEach((r) => {
      // 如果当前 r.name 在 userRoutes 数组中存在，则表示当前 r 可以访问，就把r添加到 newRoutes 中
      if (userRoutes.includes(r.name as string)) {
        if (r.children && r.children.length > 0) {
          // 当前路由有子路由
          r.children = filtrateAllSyncRoutes(r.children, userRoutes);
        }
        newRoutes.push(r);
      }
    });
  
    return newRoutes;
  }
/**
 * 用户信息
 * @methods setUserInfos 设置用户信息
 */
export const useUserInfoStore = defineStore("userInfo", {
  // user 仓库中存放的数据
  state: (): UserInfoState => ({
    // 登录成功后的用户 token
    token: getToken() as string,
    // 登录成功后的用户名
    name: "",
    // 登录成功后的用户头像
    avatar: "",
    // 登录成功后的用户角色列表
    roles: [],
    // 登录成功后的用户菜单，路由列表
    routes: [],
    // 登录成功后的用户按钮（页面功能）列表
    buttons: [],
    // 不同角色的用户将要显示的管理菜单
    menuRoutes: [], //1.通过路由表的数据渲染菜单
  }),

  actions: {
    // 用户登录
    async login(username: string, password: string) {
      // return new Promise((resolve, reject) => {
      //     setTimeout(() => {
      //         if (username === 'admin' && password === '111111') {
      //             const token = 'token-atguigu'
      //             setToken(token)
      //             this.token = token
      //             resolve(token)
      //         } else {
      //             // 给程序使用
      //             reject(new Error('用户名或密码错误!'))
      //             // 提示用户看的
      //             ElMessage.error('用户名或密码错误!')
      //         }
      //     }, 1000)
      // })

      try {
        const res = await login(username, password);
        // console.log(res);
        // 把用户登录成功后的 token 保存到 localStorage 中（持久化）
        setToken(res.token);
        // 存储 token 到 pinia
        this.token = res.token;
      } catch (e) {
        ElMessage.error("用户名或密码错误!");
        throw new Error("用户名或密码错误!");
      }
    },

    async getInfo() {
      // return new Promise((resolve, reject) => {
      // setTimeout(() => {
      //     this.name = 'admin'
      //     this.avatar = 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
      //     this.menuRoutes = staticRoutes
      //     resolve({name: this.name, avatar: this.avatar, token: this.token})
      // }, 1000)
      // })

      try {
        const res = await getUserInfo();
        // 把获取到用户名称和头像保存到pinia
        this.name = res.name;
        this.avatar = res.avatar;
        this.roles = res.roles;
        this.routes = res.routes;
        this.buttons = res.buttons;
        // 1、不要直接传递allAsyncRoutes
        console.log(0, allAsyncRoutes, this.routes);
        const userRoutes = filtrateAllSyncRoutes(
            _.cloneDeep(allAsyncRoutes),
            this.routes
          );
          console.log("userRoutes", userRoutes);
          // // 这一步，只是把路由添加到了菜单中
        // 2、每次新的菜单永远都是 = 静态菜单（而不是上一次的菜单） + 过滤后的菜单
        this.menuRoutes = [...staticRoutes, ...userRoutes];
        console.log("menuRoutes", this.menuRoutes);
        // // 还要把路由注册到路由表中
        userRoutes.forEach((r) => router.addRoute(r));
        console.log(123, router.getRoutes());
      } catch (e) {
        throw new Error("出错了");
      }
    },

    reset() {
      // 删除local中保存的token
      removeToken();
      // 提交重置用户信息的mutation
      this.token = "";
      this.name = "";
      this.avatar = "";
    },
  },
});
